<script setup>
import { onMounted, ref } from 'vue'
import mysqlConf from '../assets/icon/systemIcon/mysql.png'
import redisConf from '../assets/icon/systemIcon/redis.png'
import influxdbConf from '../assets/icon/systemIcon/InfluxDB.png'
import AIChatingConf from '../assets/icon/systemIcon/AIChating.png'
import axios from 'axios'
import { ElNotification } from 'element-plus'

onMounted(() => {
    getConfHis()
})
const confItems = ref([
    { id: 0, img: mysqlConf, name: 'mySQL' },
    { id: 1, img: redisConf, name: 'redis' },
    { id: 2, img: influxdbConf, name: 'InfluxDB' },
    { id: 3, img: AIChatingConf, name: 'AI模型'}
])
const mysqlsubmitconf = ref({
    username: '',
    password: ''
})
const redissubmitConf = ref({
    ip: '',
    duankou: '',
    password: ''
})
const influxdbsubmitConf = ref({
    url: '',
    token: '',
    org: '',
    bucket: ''
})
const aimodesubmitConf = ref({
    model: '',
    url: ''
})

const getConfHis = async() => {
    try {
        const response = await axios.get('http://192.168.31.96:5000/getConfHis')
        if(response.code === 200) {
            console.log("加载成功");
            mysqlsubmitconf.value.username = response.data.mysql.username
            mysqlsubmitconf.value.password = response.data.mysql.password
            redissubmitConf.value.ip = response.data.redis.ip
            redissubmitConf.value.duankou = response.data.redis.duankou
            redissubmitConf.value.password = response.data.redis.password
            influxdbsubmitConf.value.url = response.data.influxdb.url
            influxdbsubmitConf.value.token = response.data.influxdb.token
            influxdbsubmitConf.value.org = response.data.influxdb.org
            influxdbsubmitConf.value.bucket = response.data.influxdb.bucket
            aimodesubmitConf.value.model = response.data.aiModel.model
            aimodesubmitConf.value.url = response.data.aiModel.url
            open3()
        } else {
            console.error('加载失败');
        }
    } catch (err) {
        console.log(err);
    } finally {
        console.log("更新结束");
    }
}

const submitConf = async() => {
    console.log(
        mysqlsubmitconf.value,
        redissubmitConf.value,
        influxdbsubmitConf.value,
        aimodesubmitConf.value
    );
    const allSystemConf = {
        mysql: {
            username: mysqlsubmitconf.value.username,
            password: mysqlsubmitconf.value.password
        },
        redis: {
            ip: redissubmitConf.value.ip,
            duankou: redissubmitConf.value.duankou,
            password: redissubmitConf.value.password
        },
        influxdb: {
            url: influxdbsubmitConf.value.url,
            token: influxdbsubmitConf.value.token,
            org: influxdbsubmitConf.value.org,
            bucket: influxdbsubmitConf.value.bucket
        },
        aiModel: {
            model: aimodesubmitConf.value.model,
            url: aimodesubmitConf.value.url
        }
    }
    console.log(allSystemConf);
    try {
        const response = await axios.post('http://192.168.31.96:5000/systemConf',allSystemConf)
        if(response.code === 200) {
            console.log("更新成功");
            open1()
        }else {
            console.error("更新失败");
        }
    }catch (err) {
        console.log(err);
    }finally {
        console.log("更新结束");
    }
}
const resetForm = () => {
    mysqlsubmitconf.value.username = '',
    mysqlsubmitconf.value.password = '',
    redissubmitConf.value.ip = '',
    redissubmitConf.value.duankou = '',
    redissubmitConf.value.password = '',
    influxdbsubmitConf.value.url = '',
    influxdbsubmitConf.value.token = '',
    influxdbsubmitConf.value.org = '',
    influxdbsubmitConf.value.bucket = '',
    aimodesubmitConf.value.model = '',
    aimodesubmitConf.value.url = ''
}
const open1 = () => {
    ElNotification({
        title: 'Success',
        message: '已经成功更新系统设置！',
        type: 'success'
    })
}
const open3 = () => {
    ElNotification({
        title: 'Info',
        message: '已将最新配置导入！',
        type: 'info'
    })
}
</script>

<template>
<div class="systemLogin-content">
    <div class="welcome-header">
        <div class="wl-header-content">
            <h2>欢迎回来 Smart Care</h2>
            <h4>请输入以下内容完成配置</h4>
            <div class="wl-con-items">
                <span class="wc-item" v-for="item in confItems" :key="item.id">
                    <img :src="item.img" alt="">
                    <p>{{ item.name }}</p>
                </span>
            </div>
        </div>
        <div class="wl-header-img">
            <img src="../assets/welcome.jpg" alt="">
        </div>
    </div>
    <div class="welcome-content">
        <form @submit.prevent="submitConf">
            <div class="mysql-conf">
                <div class="header0123">
                    <img src="../assets//icon/systemconf/mysql.png" alt="">
                    <h2>mysql</h2>
                </div>
                <div class="form-conf">
                    <div class="form-group">
                        <label for="mysql-username">账户/用户:</label>
                        <input type="text" id="mysql-username" name="mysql-username" v-model="mysqlsubmitconf.username">
                    </div>
                    <div class="form-group">
                        <label for="mysql-password">密码:</label>
                        <input type="password" id="mysql-password" name="mysql-password" v-model="mysqlsubmitconf.password">
                    </div>
                </div>
            </div>
            <div class="redis-conf">
                <div class="header0123">
                    <img src="../assets/icon/systemconf/redis.png" alt="">
                    <h2>redis</h2>
                </div>
                <div class="form-conf">
                    <div class="form-group">
                        <label for="redis-ip">ip:</label>
                        <input type="text" id="redis-ip" name="redis-ip" v-model="redissubmitConf.ip">
                    </div>
                    <div class="form-group">
                        <label for="redis-duankou">端口:</label>
                        <input type="text" id="redis-duankou" name="redis-duankou" v-model="redissubmitConf.duankou">
                    </div>
                    <div class="form-group">
                        <label for="redis-password">密码:</label>
                        <input type="password" placeholder="None" id="redis-password" name="redis-password" v-model="redissubmitConf.password">
                    </div>
                </div>
            </div>
            <div class="influx-conf">
                <div class="header0123">
                    <img src="../assets/icon/systemconf/InfluxDB.png" alt="">
                    <h2>InfluxDB</h2>
                </div>
                <div class="form-conf">
                    <div class="form-group">
                        <label for="influxdb-url">URL:</label>
                        <input type="text" id="influxdb-url" name="influxdb-url" v-model="influxdbsubmitConf.url">
                    </div>
                    <div class="form-group">
                        <label for="influxdb-token">Token:</label>
                        <input type="password" id="influxdb-token" name="influxdb-token" v-model="influxdbsubmitConf.token">
                    </div>
                    <div class="form-group">
                        <label for="influxdb-org">Organization</label>
                        <input type="text" id="influxdb-org" name="influxdb-org" v-model="influxdbsubmitConf.org">
                    </div>
                    <div class="form-group">
                        <label for="influxdb-bucket">Bucket(容器)</label>
                        <input type="text" id="influxdb-bucket" name="influxdb-bucket" placeholder="比如：kylin" v-model="influxdbsubmitConf.bucket">
                    </div>
                </div>
            </div>
            <div class="aiChating-conf">
                <div class="header0123">
                    <img src="../assets/icon/systemconf/a-AImoxing.png" alt="">
                    <h2>AI模型</h2>
                </div>
                <div class="form-conf">
                    <div class="form-group">
                        <label for="ai-model">模型名称</label>
                        <input type="text" id="ai-model" name="ai-model" placeholder="比如：deepseek-1:7b" v-model="aimodesubmitConf.model">
                    </div>
                    <div class="form-group">
                        <label for="ai-url">URL</label>
                        <input type="text" id="ai-url" name="ai-url" v-model="aimodesubmitConf.url">
                    </div>
                </div>
            </div>
            <button type="submit" class="sub-btn">保存并更新</button>
            <button class="reset-btn" @click="resetForm">清空重置</button>
        </form>
    </div>
</div>
</template>

<style>
.systemLogin-content {
    width: 100%;
}
.welcome-header {
    width: 100%;
    height: 250px;
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(to left, rgb(0, 54, 170), rgb(0, 102, 255));
    display: flex;
}
.welcome-content {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 50px;
}
.wl-header-content {
    width: 65%;
    text-align: left;
    margin-top: 20px;
}
.wl-header-content h2 {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
}
.wl-header-content h4 {
    font-size: 18px;
    color: rgb(255, 255, 255, 0.7);
}
.wl-header-img {
    display: flex;
    width: 32%;
    height: 100%;
    border-radius: 20px;
    margin-left: 3%;
}
.wl-header-img img {
    width: 100%;
    height: 100%;
}
.wl-header-content .wl-con-items {
    width: 70%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.wl-con-items .wc-item {
    height: 100%;
    background-color: rgba(19, 86, 233, 0.521);
    padding: 10px 15px;
    border-radius: 20px;
    text-align: center;
    align-items: center;
    display: flex;
}
.wl-con-items .wc-item:hover {
    box-shadow: 0px 0px 10px rgb(255, 255, 255, 0.7);
    transition: box-shadow 0.5s;
}
.wc-item img {
    width: 35px;
    height: 35px;
}
.wc-item p {
    margin-left: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
}
.welcome-content .mysql-conf,
.welcome-content .redis-conf,
.welcome-content .influx-conf,
.welcome-content .aiChating-conf {
    width: 100%;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.6);
    border-radius: 20px;
    margin-bottom: 30px;
}
.header0123 {
    width: 100%;
    height: 60px;
    text-align: center;
    padding: 8px 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.header0123 img {
    width: 35px;
    height: 35px;
    margin-right: 5px;
}
.header0123 h2 {
    font-size: 20px;
    color: rgb(0, 81, 255);
    font-weight: 750;
}

.form-conf {
    width: 100%;
    padding: 0px 8px;
    display: grid;
    grid-template-areas: "a a";
    grid-gap: 5%;
    grid-template-columns: 47.5%;
}
.form-conf .form-group {
    margin-bottom: 25px;   
}
.form-group label {
    font-size: 18px;
    display: block;
    margin-bottom: 8px;
}
.form-group input {
    width: 100%;
    height: 45px;
    border: 1px solid rgba(184, 183, 183, 0.6);
    border-radius: 10px;
    padding: 0 8px;
}
.sub-btn {
    padding: 15px 20px;
    border: 0;
    border-radius: 8px;
    background-color: rgb(0, 81, 255);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    margin-right: 10px;
}
.reset-btn {
    padding: 15px 20px;
    border: 2px solid rgb(0, 81, 255);
    border-radius: 8px;
    background-color: #fff;
    color: rgb(0, 81, 255);
    font-weight: 700;
    font-size: 18px;
}
.sub-btn:hover,.reset-btn:hover {
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(180, 180, 180, 0.7);
    transition: box-shadow 0.5s;
}
</style>